<template>
  <div class="chat" :style="{height:innerH+'px'}">
    <div class="chatContainer" :style="{height:innerH1+'px'}">
      
      <div class="chatBoxBox">
        <chatBox
          :text="item.content"
          :type="item.type||type"
          :username="item.username"
          :realname="item.realname"
          :id="item.UserId"
          :avatar="item.avatar"
          v-for="(item,index) in chatItem"
          :key="index"
        ></chatBox>
      </div>
      <div class="pc">
        <textarea v-model="content" :placeholder="ifLogin?'欢迎聊天...':'请先登录'" :disabled="!ifLogin"></textarea>
        <button @click="sendMessage" :disabled="!ifLogin">发消息</button>
      </div>
    
    <div class="mv">
      <input :disabled="!ifLogin" type="text"  v-model="content">

      <button @click="sendMessage" :disabled="!ifLogin">发消息</button>
    </div>
    </div>
    
  </div>
</template>

<script>
import chatBox from "../../components/chatBox";
import chatMenu from "../../components/chatRoomLeftList.vue";
import Bus from "../../bus";
export default {
  components: {
    chatBox,
    chatMenu,
  },
  data() {
    return {
      content: "",
      chatItem: [], //所有谈话内容
      leftMenuItem: [],
      newUsernameOfRoot: "",
      type: "chat",
    };
  },
  created() {
    this.initContent();
    // if (this.$store.getters.user.status === "876ea4f21078c7d38e3b0bdc74a") {
    //   this.initChat();
    // }
  },
  mounted() {
    this.initJoinRoom();
    this.tokeContent();
    // setTimeout(() => {
    //   document.querySelector(".chatBoxBox").scrollTop = document.querySelector(
    //     ".chatBoxBox"
    //   ).scrollHeight;
    // });
  },
  computed: {

    innerH(){
      return document.body.clientWidth<765? window.innerHeight-63 :false
    },
    // 移动端浏览器要额外适配 通过window.innerHeight
    innerH1(){
      return document.body.clientWidth<765? window.innerHeight-103 :false

    },
    ifLogin() {
      return this.$store.getters.user.username;
    },
    status() {
      return this.$store.getters.user.status;
    },
    //房间名字一开始房间名字为各自的用户名 在不断更换房间的时候会改变管理员的username
    // 来进入被别人的房间
    username() {
      return this.newUsernameOfRoot == ""
        ? this.$store.getters.user.username
        : this.newUsernameOfRoot;
    },
    socketId() {
      return this.$socket.id;
    },
    realname() {
      return this.$store.getters.user.realname;
    },
    userId() {
      return this.$store.getters.user.id;
    },
  },
  methods: {
    initChat() {
      this.$axios.get("/chatRoom/lastSearch").then((res) => {
        if (res.data.error === -1) {
          this.leftMenuItem = res.data.data;          
        }else{
          this.leftMenuItem = [];
        }
      }).catch(err=>{
        alert("服务器出现问题如多次出现请联系博主")
      })
    },
    seeCurrentUserMessage(message) {
      setTimeout(() => {
        document.querySelector(
          ".chatBoxBox"
        ).scrollTop = document.querySelector(".chatBoxBox").scrollHeight;
      });
      console.log(message);

      this.chatItem = message;
    },
    initContent() {
      this.$axios
        .get("/chatRoom/search")
        .then((res) => {
          if (res.data.error === -1) {
            this.chatItem = res.data.data;
            setTimeout(() => {
      document.querySelector(".chatBoxBox").scrollTop = document.querySelector(
        ".chatBoxBox"
      ).scrollHeight;
    });
          } else {
            // 错误提示
            this.chatItem = []
          }
        }).catch(err=>{
            Bus.$emit("live2dAboutSendError");

        })
    },
    //正在谈话
    tokeContent() {
      this.sockets.subscribe("message", (data) => {
          this.chatItem.push(data);
        setTimeout(() => {
          document.querySelector(
            ".chatBoxBox"
          ).scrollTop = document.querySelector(".chatBoxBox").scrollHeight;
        });
      });
    },
    // 初始化加入房间 即管理员进入指定房间,其他人进入随机房间
    initJoinRoom() {
      this.$socket.emit("online", {
        username: this.username,
        realname: this.realname,
        roomType: 'many'
      });
    },
    sendMessage() {
      if(!this.content){
        return
      }
      this.$axios
        .get("/chatRoom/add", {
          params: {
            username: this.$store.getters.user.username,
            content: this.content,
          },
        })
        .then((res) => {
          if (res.data.error === -1) {
            this.$socket.emit("message", {
              msg: this.content,
              username: this.username,
              realname: this.realname,
              avatar: this.$store.getters.user.avatar,
              id: this.userId,
              roomType: 'many'
            });
            this.content = "";
          } else {
            Bus.$emit("live2dAboutSendError");
          }
        })
        .then((res) => {});
    },
    // searchChat() {
    //   this.$axios.get("/chat/search", {
    //     params: {
    //       username1: this.$store.getters.user.username,
    //       username2: "2628735401",
    //     },
    //   });
    // },
  },
  beforeDestroy() {
    this.$socket.emit("leave",{
      username: 'publicRoom',
      realname: this.realname,
    });
    this.$socket.off("message");
    this.$socket.off("leave");
  },
};
</script>

<style lang="less" scoped>
@import url("../../css/mobile/mvsocket.less");
@import url("../../css/pc/socket.less");
</style>